import React from 'react';
import Link from 'next/link';
import { 
  SpeakerWaveIcon, 
  Cog6ToothIcon,
} from '@heroicons/react/24/outline';
import HistoryIcon from '../icons/HistoryIcon';
import BackIcon from '../icons/BackIcon';
import { useRouter } from 'next/router';
import { useUIStore } from '@/store/ui';

interface ChatHeaderProps {
  title: string;
  onSettingsClick?: () => void;
  onSpeakerClick: () => void;
  isSpeakerOn: boolean;
  onHistoryClick?: () => void;
  serviceId?: string;
}

const ChatHeader: React.FC<ChatHeaderProps> = ({ 
  title, 
  onSpeakerClick,
  isSpeakerOn,
  onHistoryClick,
  serviceId,
}) => {
  const router = useRouter();
  const { setCurrentView } = useUIStore();

  const handleBackClick = (e: React.MouseEvent) => {
    e.preventDefault();
    if (serviceId === 'default') {
      // If we're in the default chat view on homepage, switch to services view
      setCurrentView('services');
    } else {
      // If we're in a service chat, go back to homepage
      router.push('/');
    }
  };

  return (
    <div className="page-header justify-between">
      <div className="flex items-center">
        <a href="#" onClick={handleBackClick} className="mr-3">
          <BackIcon className="w-6 h-6 text-gray-600 hover:text-gray-800 transition-colors" />
        </a>
        <span className="text-lg font-medium text-gray-800">{title}</span>
      </div>
      <div className="flex items-center space-x-1">
        <button 
          onClick={onHistoryClick}
          className="p-1.5 rounded-lg hover:bg-gray-50 text-gray-600 transition-colors"
        >
          <HistoryIcon className="w-5 h-5" />
        </button>
        <button 
          className={`p-1.5 rounded-lg transition-colors ${
            isSpeakerOn ? 'text-gray-800 bg-gray-100' : 'text-gray-600 hover:bg-gray-50'
          }`}
          onClick={onSpeakerClick}
        >
          <SpeakerWaveIcon className="w-5 h-5" />
        </button>
        <Link href="/chat/settings">
          <button className="p-1.5 rounded-lg hover:bg-gray-50 text-gray-600 transition-colors">
            <Cog6ToothIcon className="w-5 h-5" />
          </button>
        </Link>
      </div>
    </div>
  );
};

export default ChatHeader;